<template>
	<view>
		<navbar :parameter='parameter'></navbar>
		<scroll-view scroll-x class="scroll-h" :scroll-left="scrollleft" scroll-with-animation
			:style="{top:navH+'rpx'}">
			<block v-for="(item,index) in tabBars" :key="index">
				<view class="tab-item" :class="{'active' :coupon_status==index}" @tap="tabtap(item.id)">
					<view class="">{{item.name}}</view>
				</view>
			</block>
		</scroll-view>
		<view class="wap">
			<view class="coupon-item acea-row" v-for="(item,index) in couponList" :key='index' v-if="couponList.length > 0">
				<view class="num-box">
					<view class="num"> ￥<text>{{item.coupon_price}}</text> </view>
					<view class="">满{{item.threshold_price}}元可用 </view>
				</view>
				<view class="cont-box">
					<view class="title">{{item.name}}</view>
					<view class="tips">使用时可抵扣 </view>
					<view class="acea-row row-between-wrapper">
						<view class="time">{{item.start_time}}~{{item.end_time}}</view>
						<!-- <view class="user-btn" v-if="item.status == 1 ">立即使用 </view> -->
						<image src="/static/images/used.png" mode="widthFix" class="used" v-if="item.status == 2"></image>
						<image src="/static/images/invalid.png" mode="widthFix" class="used" v-if="item.status == 3"></image>
					</view>
				</view>
			</view>
			<u-empty mode="coupon"icon="http://cdn.uviewui.com/uview/empty/coupon.png" v-if="couponList.length == 0"></u-empty>
			<u-loadmore :status="status" line dashed @loadmore="loadmore" v-if="couponList.length > 0"/>
		</view>
	</view>
</template>

<script>
	let app = getApp();
	export default {
		data() {
			return {
				parameter: {
					'navbar': '1',
					'return': '1',
					'title': '优惠券',
					'color': true,
					'class': 'on'
				},
				navH: app.globalData.navHeight,
				tabBars: [{
					id: 0,
					name: '全部'
				}, {
					id: 1,
					name: '待使用'
				}, {
					id: 2,
					name: '已使用'
				},{
					id: 3,
					name: '已失效'
				}],				  
				couponList: [],
				status: 'loadmore',
				limit: 10,
				page: 1,
				total_num: '',
				coupon_status:0
			};
		},
		onLoad() {
			this.couponLists();
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
		
		},
		onShareTimeline(res) { //分享到朋友圈
		
		},
		onReachBottom() {
			this.loadmore()
		},
		methods: {
			async couponLists() {
				const res = await this.$myRequest({
					url: '/api/user/couponLists',
					data: {
						openid:uni.getStorageSync('openid'),
						page: this.page,
						limit: this.limit,
						status:this.coupon_status,
					}
				})
				this.couponList = [...this.couponList, ...res.data.data];
				this.total_num = res.data.total_num;
			},
			tabtap(id) {
				this.coupon_status = id;
				this.page = 1;
				this.couponList = [];
				this.couponLists();
			},
			loadmore() {
				console.log(11111)
				if (this.total_num == this.couponList.length) {
					this.status = 'nomore';
				} else {
					this.status = 'loading';
					this.page++;
					this.couponLists();
				}
				setTimeout(() => {
					if (this.total_num == this.couponList.length) this.status = 'nomore';
					else this.status = 'loading';
				}, 2000)
			}
		}
	}
</script>

<style style="scss" scoped>
	.scroll-h {
		width: 100%;
		flex-direction: row;
		white-space: nowrap;
		background-color: #fff;
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;

	}

	.tab-item {
		display: inline-block;
		flex-wrap: nowrap;
		padding-bottom: 24rpx;
		color: #333;
		font-size: 28rpx;
		text-align: center;
		position: relative;
		width: 25%;
		z-index: 10;
	}

	.tab-item.active::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		background-color: #347DFE;
		height: 6rpx;
		border-radius: 6rpx;
		width: 40rpx;
	}

	.wap {
		padding: 80rpx 30rpx 20rpx 30rpx;
		background-color: #fff;
		min-height: calc(100vh - 120rpx);
	}

	.coupon-item {
		width: 100%;
		box-shadow: 7.217px 8.302px 24.94px 4.06px rgba(68, 133, 218, 0.08);
		background-color: #fff;
		padding: 30rpx;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
	}

	.num-box {
		width: 200rpx;
		height: 160rpx;
		border-radius: 20rpx;
		color: #fff;
		background: linear-gradient(90deg, #347DFE, #86B0FA);
		text-align: center;
		font-size: 24rpx;
		padding-top: 30rpx;
	}

	.num-box .num {
		padding-bottom: 20rpx;
		line-height: 1;
	}

	.num-box .num text {
		font-size: 48rpx;
	}

	.cont-box {
		padding-left: 20rpx;
		flex: 1;
		font-size: 22rpx;
		color: #bababa;		
		position: relative;
	}

	.cont-box .title {
		font-size: 32rpx;
		color: #000;
		font-weight: 700;
		padding-bottom: 30rpx;
	}

	.cont-box .tips {
		padding-bottom: 20rpx;
	}

	.cont-box .user-btn {
		width: 130rpx;
		height: 46rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
		color: #677afd;
		border: 1px solid #677afd;
		text-align: center;
		line-height: 46rpx;
	}

	.cont-box .used{
		width: 150rpx;
		position: absolute;
		bottom: 0;
		right: 0;
	}
</style>
